
<template>
  <div class="content">
    <div class="login-box">
      <div class="picture">
        <div class="left">
          <img src="../../assets/login-images/icon03.png" alt="" />
        </div>
        <div class="right">
          <img src="../../assets/login-images/lovedog.png" alt="" />
        </div>
      </div>

      <div class="system">后台管理系统</div>
      <div class="phone">手机号登录</div>
      <el-form :rules="rules" :model="rulesForm" class="form">
        <img class="a" src="../../assets/login-images/icon01.png" alt="" />
        <img class="b" src="../../assets/login-images/icon02.png" alt="" />
        <el-form-item prop="name">
          <el-input
            v-model="name"
            class="user"
            type="text"
            placeholder="请输入手机号/邮箱/账号"
          />
        </el-form-item>
        <!-- <span v-show="show">1233</span> -->

        <el-form-item>
          <el-input
            v-model="password"
            class="pass"
            type="password"
            placeholder="请输入密码"
          />
        </el-form-item>
      </el-form>
      <div class="remember">
        <input type="checkbox" />
        <label>记住密码</label>
        <!-- <a href="#"></a> -->
        <router-link to="/forget">忘记密码？</router-link>
      </div>
      <div class="code">
        <input type="text" placeholder="请输入验证码" />
        <div class="check"></div>
      </div>
      <el-button class="login" @click="login">登录</el-button>
      <div class="could">
        <img src="../../assets/login-images/icon04.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const name = ref("");
    const password = ref("");
    const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    const emailReg =
      /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
    const passReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
    const router = useRouter();
    const login = ref(() => {
      if (name.value === "" || password.value === "") {
        alert("账号，密码不能为空");
      } else {
        if (
          phoneReg.test(name.value) !== true &&
          emailReg.test(name.value) !== true
        ) {
          alert("账号格式有误");
        } else {
          if (passReg.test(password.value !== true)) {
            alert("密码格式有误");
          } else {
            if (
              name.value != 19142044046 &&
              name.value != "1571740906@qq.com"
            ) {
              alert("账号或密码错误");
            } else {
              if (password.value != "lwj12345") {
                alert("账号或密码错误");
              } else {
                router.push("/home/data");
              }
            }
          }
        }
      }
    });

    return {
      login,
      name,
      password,
      phoneReg,
      emailReg,
      passReg,
    };
  },

  // data() {
  //   return {
  //     rulesForm: {
  //       name: "",
  //       password: "",
  //     },
  //     rules: {
  //       name: [
  //         { required: true, message: "账号不能为空", trigger: "blur" },
  //         {
  //           pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
  //           message: "手机格式错误",
  //           trigger: "blur",
  //         },
  //         {
  //           min: 3,
  //           message: "不能少于3个字符",
  //           trigger: "blur",
  //         },

  //       ],
  //     },
  //   };
  // },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100vh;
  background: url("../../assets/login-images/picture01.png") no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: relative;

  .login-box {
    width: 352px;
    height: 452px;
    background: rgb(106, 170, 197);
    // border: 1px solid #333333;
    // opacity: 0.8;
    border-radius: 10px;
    position: absolute;
    top: 100px;
    left: 960px;

    .picture {
      display: flex;

      .left {
        margin-top: 20px;
        margin-left: 63px;
        img {
          width: 73px;
          height: 54px;
        }
      }
      .right {
        margin-left: 10px;
        margin-top: 33px;
        img {
          width: 121px;
          height: 42px;
        }
      }
    }

    .system {
      width: 120px;
      height: 20px;
      margin: 32px 116px 0px 116px;
      font-size: 20px;
      font-family: YouYuan;
      font-weight: 400;
      color: #ffffff;
      opacity: 1;
    }
    .phone {
      width: 80px;
      height: 16px;
      font-size: 16px;
      font-family: YouYuan;
      font-weight: 400;
      color: #ffffff;
      margin-top: 35px;
      margin-left: 138px;
    }
    .form {
      margin-top: 25px;
      margin-left: 66px;
      position: relative;

      span {
        position: absolute;
        top: 25px;
      }

      .a {
        position: absolute;
        left: -30px;
      }
      .b {
        position: absolute;
        left: -30px;
        top: 50px;
      }
      img {
        width: 22px;
        height: 24px;
      }
      ::v-deep .user .el-input__inner {
        font-size: 10px;
        text-align: center;
        font-family: youyuan;

        border-radius: 13px;
      }
      ::v-deep .pass .el-input__inner {
        font-size: 10px;
        text-align: center;
        font-family: youyuan;
        border-radius: 13px;
      }

      .user {
        width: 225px;
        height: 24px;
      }

      .pass {
        width: 225px;
        height: 24px;
        margin-top: 8px;
      }
    }

    .remember {
      height: 10px;
      display: flex;
      margin-left: 75px;
      margin-top: 12px;

      label {
        font-family: YouYuan;
        font-size: 8px;
        line-height: 10px;
      }

      a {
        font-family: YouYuan;
        font-size: 8px;
        line-height: 10px;
        margin-left: 90px;
        text-decoration: underline;
      }
    }
    .code {
      margin-left: 66px;
      margin-top: 22px;
      display: flex;

      input {
        width: 93px;
        height: 28px;
        border-radius: 13px;
        border: 1px solid white;
        text-align: center;
      }
      input::-webkit-input-placeholder {
        font-size: 8px;
        text-align: center;
        font-family: YouYuan;
      }

      .check {
        width: 118px;
        height: 28px;
        background: #f9a5a4;
        border-radius: 12px;
        margin-left: 16px;
      }
    }
    .login {
      width: 226px;
      height: 29px;
      background: #f9a5a4;
      border-radius: 12px;
      text-align: center;
      margin-left: 66px;
      margin-top: 22px;
      color: white;
      line-height: 23px;
    }
  }
  .could {
    img {
      width: 104px;
      height: 60px;
      position: absolute;
      left: 290px;
      top: 415px;
    }
  }
}
</style>
